<template>
  <div id="detailtitle">
    <div class="main">
      <Row>
        <!-- 标题 -->
        <Col span="17" class="maxTitle">{{titleInfo.maxTitle?titleInfo.maxTitle:''}}</Col>
        <!-- 价钱红色 -->
        <Col span="7" class="maxTitle redText">￥{{titleInfo.detail_price?titleInfo.detail_price:''}}</Col>
      </Row>
      <Row>
        <!-- 描述 -->
        <Col span="24" class="description">{{titleInfo.description?titleInfo.description:''}}</Col>
      </Row>
      <Row>
        <Col span="24" class="spliteline">
          <Divider style="margin:0px;" />
        </Col>
      </Row>
      <Row>
        <!-- 难度 -->
        <Col span="6" class="DiffTimeWage">{{titleInfo.diffTitle?titleInfo.diffTitle:''}} : {{titleInfo.diff?titleInfo.diff:''}}</Col>
        <Col span="1">
          <Divider type="vertical" />
        </Col>
        <!-- 学习周期 -->
        <Col
          span="8"
          class="DiffTimeWage"
        >{{titleInfo.timeTitle?titleInfo.timeTitle:''}} : {{titleInfo.time?titleInfo.time:''}}</Col>
        <Col span="1">
          <Divider type="vertical" />
        </Col>
        <!-- 预期工资 -->
        <Col
          span="8"
          class="DiffTimeWage"
        >{{titleInfo.wageTitle?titleInfo.wageTitle:''}} : {{titleInfo.wage?titleInfo.wage:''}}</Col>
      </Row>
    </div>
  </div>
</template>

<script>
//导入vuex
import Vue from "vue";
//导入iview-ui组件
import { Row, Col, Divider } from "view-design";

export default {
  name: "detailtitle",
  //组件注册
  components: {
    Row,
    Col,
    Divider
  },
  //传入属性数据
  props: ["titleInfo"],
  
  watch: {},
  methods: {

  },
  created() {},
  mounted() {
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部更改的UI样式 */
.main {
  font-size: 1.92px;
  color: #9b9b9b;
  background-color: #fff;
}
.maxTitle {
  font-size: 18px;
  color: #000;
  padding: 30px 0 0 20px;
}
.redText {
  color: red;
}
.description {
  padding: 20px 20px;
}
.spliteline {
  padding: 0 20px 15px;
  text-align: right;
}
.DiffTimeWage {
  font-size: 1px;
  padding: 0 0 20px 20px;
}
</style>